<template>
  <div class="redu_root">
    <div class="redu_step">
      <el-steps :active="stepActive">
        <el-step title="基本信息" description="活动的基本信息配置"></el-step>
        <el-step title="领取条件" description="优惠券的领取条件"></el-step>
        <el-step title="参与条件" description="对活动所有限制的条件"></el-step>
      </el-steps>
    </div>
    <div class="step_one step_form" v-show="stepActive === 1">
      <el-form :model="stepOneData" :rules="stepOneRule" ref="ruleForm1" label-width="120px" class="form-com-css">
        <el-form-item label="发放标识" prop="issueRemark" :rules="{
            required: true,
            message: '请填入方案方式标识',
            trigger: 'blur',
          }">
          <input type="text" class="form-control" v-model="stepOneData.issueRemark" style="width: 180px" />
        </el-form-item>
        <el-form-item label="活动名称" prop="issueName" :rules="{
            required: true,
            message: '请填入活动名称',
            trigger: 'blur',
          }">
          <input type="text" class="form-control" v-model="stepOneData.issueName" style="width: 180px" />
        </el-form-item>
        <!-- <el-form-item label="使用条件" prop="couponThresholdAmt" :rules="{
            required: true,
            message: '请填写优惠券使用条件',
            trigger: 'blur',
          }">
          <div>
            此活动内的优惠券，满
            <input type="text" class="form-control d-inline" v-model.number="stepOneData.couponThresholdAmt"
              style="width: 100px" />
            元 才可使用
          </div>
        </el-form-item> -->

        <el-form-item prop="selectionCouponList" label-width="30px">
          <div class="t">参与活动的优惠券</div>
          <div style="margin-bottom: 10px">
            <el-button type="primary" @click="getCouponList">添加优惠劵</el-button>
          </div>
          <div>
            <el-table border :data="selectionCouponList" class="tableStyle">
              <el-table-column type="index" label="序号" align="left">
              </el-table-column>
              <el-table-column prop="couponRemark" label="优惠券标识" align="left">
              </el-table-column>
              <el-table-column prop="minUseCouponAmt" label="使用门槛" align="left">
                <template slot-scope="scope">
                  <el-input @input="changeMember(scope.$index)" v-model="scope.row.minUseCouponAmt" v-if="updateSwitch && scope.$index === updateIndex"
                    :placeholder="scope.row.minUseCouponAmt !== null ? scope.row.minUseCouponAmt : '请输入'"></el-input>
                  <span v-else>{{ scope.row.minUseCouponAmt }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="couponName" label="操作" align="left">
                <template slot-scope="scope">
                  <el-button @click="delRowEvent('selectionCouponList', scope.$index)" type="text"
                    size="small">删除</el-button>
                  <el-button v-show="!updateSwitch" type="text" @click="switchEdit(scope.$index)"
                    size="small">编辑</el-button>
                  <el-button v-show="updateSwitch && scope.$index === updateIndex" type="text"
                    size="small" @click="submitTable(scope.$index, scope.minUseCouponAmt)">确定</el-button>
                    <!-- <el-button v-show="updateSwitch && scope.$index === updateIndex" type="text"
                    size="small" @click="cloneTable(scope.$index)">取消</el-button> -->
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-form-item>
        <el-form-item prop="youplist" label-width="30px">
          <div class="t">参与活动的油品</div>
          <div style="margin-bottom: 10px">
            <!-- <el-button :type="stepOneData.oilPartOrAll ? 'primary' : ''" @click="() => {
                stepOneData.oilPartOrAll = 1;
              }
              ">全部油品</el-button> -->
            <el-button :type="stepOneData.oilPartOrAll ? '' : 'primary'" @click="() => {
                oilOpen = true;
                stepOneData.oilPartOrAll = 0;
              }
              ">添加油品</el-button>
          </div>
          <div>
            <el-table border :data="selectOilList" class="tableStyle">
              <el-table-column type="index" label="序号" width="180">
              </el-table-column>
              <el-table-column prop="oilName" label="油品名称">
              </el-table-column>
              <el-table-column prop="h" label="操作" width="180">
                <template slot-scope="scope">
                  <el-button @click="delRowEvent('selectOilList', scope.$index)" type="text" size="small">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-form-item>

        <el-form-item class="nolable">
          <el-button v-if="false">取消</el-button>
          <el-button type="primary" @click="oneNextEvent">保存并下一步</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="step_two step_form" v-show="stepActive === 2">
      <el-form :model="stepTwoData" :rules="stepTwoRules" ref="ruleForm2" class="form-com-css">
        <el-form-item label="" prop="issueType" :rules="{
            required: true,
            message: '请选择发放类型',
            trigger: 'change',
          }">
          <div class="t">发放类型</div>
          <el-radio v-model="stepTwoData.issueType" label="1">消费发放</el-radio>

          <el-radio v-model="stepTwoData.issueType" label="2">网页方式、二维码-静态码（主动推送也要用此类型）</el-radio>
          <br />
          <div class="disflx one-alert" style="margin-bottom: 10px">
            <el-radio v-model="stepTwoData.issueType" label="3">支付成功后的领取位</el-radio>
            <br />
            <el-alert class="alert-style" title="用户支付成功后，自动弹出领取页面，用户需要手动领取" type="info" show-icon>
            </el-alert>
          </div>
          <div class="disflx one-alert" style="margin-bottom: 10px">
            <el-radio v-model="stepTwoData.issueType" label="4">plus会员专用</el-radio>
            <!-- <br /> -->
            <!-- <el-alert
              class="alert-style"
              title="用户支付成功后，自动弹出领取页面，用户需要手动领取"
              type="info"
              show-icon
            >
            </el-alert> -->
          </div>
          <el-radio v-model="stepTwoData.issueType" label="5">数据预录入模板（给用户导入优惠券时使用）</el-radio>
          <br />
        </el-form-item>
        <el-form-item label="" prop="thresholdType" v-if="stepTwoData.issueType == 1 || stepTwoData.issueType == 3"
          :rules="{
              required: (stepTwoData.issueType == 1 || stepTwoData.issueType == 3),
              message: '请选择发放类型',
              trigger: 'change',
            }">
          <div class="t">发放门槛</div>
          <div>
            <div>
              <el-radio v-model="stepTwoData.thresholdType" label="constant">定值</el-radio><el-radio
                v-model="stepTwoData.thresholdType" label="ladder">阶梯</el-radio>
            </div>
            <div></div>
          </div>
          <div v-if="stepTwoData.thresholdType == 'constant'">
            消费达到
            <input type="text" class="form-control d-inline-block" v-model.number="stepTwoData.getThresholdAmt"
              style="width: 80px" />元时，{{ stepTwoData.issueType == 1 ? "系统自动发放" : ""
              }}{{ stepTwoData.issueType == 3 ? "触发领取页" : "" }}
          </div>
          <hr v-if="stepTwoData.thresholdType == 'ladder'" />
          <div v-if="stepTwoData.thresholdType == 'ladder'">
            <el-button type="primary" size="mini" @click="addThresholdLadder">添加阈值</el-button>
            <div v-for="(item, index) in stepTwoData.thresholdLadder" :key="index" style="
                border: 1px solid #97a8be;
                border-radius: 10px;
                padding: 0 10px;
                margin-bottom: 10px;
              ">
              消费达<input type="text" class="form-control d-inline-block"
                v-model.number="stepTwoData.thresholdLadder[index].value" style="width: 80px" />元，可领取优惠券：
              <span>
                <el-checkbox v-model="stepTwoData.thresholdLadder[index].couponList" :label="ele.id.toString()"
                  v-for="ele in selectionCouponList" :key="ele.id">{{ ele.couponRemark + "--" + ele.id }}</el-checkbox>
              </span>
              <span>
                <el-button @click="deleteThresholdLadder(index)" style="margin-left: 20px" size="mini">删除</el-button>
              </span>
            </div>
          </div>
        </el-form-item>


        <el-form-item label="" prop="giveLimit"
          v-if="stepTwoData.issueType == 2 || stepTwoData.issueType == 3 || stepTwoData.issueType == 4" :rules="{
              required: stepTwoData.issueType == 2 || stepTwoData.issueType == 3 || stepTwoData.issueType == 4,
              message: '请填入一次能领取几张次数',
              trigger: 'blur',
            }">
          <div class="t">一次能领取几张次数</div>
          用户进入后一次能领取<input type="text" class="form-control d-inline-block" v-model.number="stepTwoData.giveLimit"
            style="width: 80px" />张
        </el-form-item>

        <el-form-item label="" prop="giveCount" :rules="{
            required: (stepTwoData.issueType == 1 || stepTwoData.issueType == 2 || stepTwoData.issueType == 3 || stepTwoData.issueType == 4),
            message: '请填写参与次数',
            trigger: 'change',
          }"
          v-if="stepTwoData.issueType == 1 || stepTwoData.issueType == 2 || stepTwoData.issueType == 3 || stepTwoData.issueType == 4">
          <div class="t">总共能参与的次数</div>
          <div>
            单个用户能进入这个领取界面
            <input :disabled="true" type="text" class="form-control d-inline-block" v-model.number="stepTwoData.giveCount"
              style="width: 80px" />
            次
          </div>
        </el-form-item>

        <el-form-item prop="antiCheating" :rules="{
            required: (stepTwoData.issueType == 1 || stepTwoData.issueType == 2 || stepTwoData.issueType == 3 || stepTwoData.issueType == 4),
            message: '请选择单日能参与次数',
            trigger: 'change',
          }"
          v-if="stepTwoData.issueType == 1 || stepTwoData.issueType == 2 || stepTwoData.issueType == 3 || stepTwoData.issueType == 4">
          <div class="t">单日能参与次数</div>
          <div class="disflx three-b one-alert">
            <el-radio v-model="stepTwoData.antiCheating" label="1">开启防作弊</el-radio>
            <!-- <el-alert class="alert-style" title="开启后，同一ID一个自然天只能参与一次" type="info" show-icon>
            </el-alert> -->
          </div>
          <br />

          <div class="disflx three-b" style="margin-bottom: 10px">
            <el-radio v-model="stepTwoData.antiCheating" label="0">自定义次数</el-radio>
            <el-input :disabled="true" v-model="stepTwoData.countOfDay"></el-input>
            <!-- :disabled="stepTwoData.antiCheating != 0" -->
          </div>
        </el-form-item>

        <el-form-item prop="antiCheating" :rules="{
            required: (stepTwoData.issueType == 1 || stepTwoData.issueType == 2 || stepTwoData.issueType == 3 || stepTwoData.issueType == 4),
            message: '请选择单月能参与次数',
            trigger: 'change',
          }"
          v-if="stepTwoData.issueType == 1 || stepTwoData.issueType == 2 || stepTwoData.issueType == 3 || stepTwoData.issueType == 4">
          <div class="t">单月能参与次数</div>
          <div class="disflx three-b one-alert">
            <el-radio v-model="stepTwoData.antiMonthCheating" label="1">关闭单月防作弊（单月无上限）</el-radio>
            <!-- <el-alert
              class="alert-style"
              title="开启后，同一ID一个自然月只能参与一次"
              type="info"
              show-icon
            >
            </el-alert> -->
          </div>
          <br />

          <div class="disflx three-b" style="margin-bottom: 10px">
            <el-radio v-model="stepTwoData.antiMonthCheating" label="0">自定义次数</el-radio>
            <el-input :disabled="true" v-model="stepTwoData.countOfMonth"></el-input>
            <!-- :disabled="stepTwoData.antiMonthCheating != 0" -->
          </div>
        </el-form-item>
        <el-form-item prop="startDate" label-width="30px" :rules="{
            required: (stepTwoData.issueType == 1 || stepTwoData.issueType == 2 || stepTwoData.issueType == 3 || stepTwoData.issueType == 4),
            message: '请选择开始时间',
            trigger: 'change',
          }"
          v-if="stepTwoData.issueType == 1 || stepTwoData.issueType == 2 || stepTwoData.issueType == 3 || stepTwoData.issueType == 4">
          <div class="t">活动开始时间</div>
          <div @click="getStartTime">
            <el-radio v-model="stepTwoData.isimm" label="isimm">立即执行</el-radio>
          </div>
          <div class="date-css">
            <el-date-picker v-model="stepTwoData.startDate" value-format="yyyy-MM-dd HH:mm:ss" type="datetime"
              placeholder="选择日期">
            </el-date-picker>
          </div>
        </el-form-item>

        <el-form-item prop="endDate" label-width="30px" :rules="{
            required: (stepTwoData.issueType == 1 || stepTwoData.issueType == 2 || stepTwoData.issueType == 3 || stepTwoData.issueType == 4),
            message: '请选择结束时间',
            trigger: 'change',
          }"
          v-if="stepTwoData.issueType == 1 || stepTwoData.issueType == 2 || stepTwoData.issueType == 3 || stepTwoData.issueType == 4">
          <div class="t">活动结束时间</div>
          <div class="date-css">
            <el-date-picker v-model="stepTwoData.endDate" value-format="yyyy-MM-dd HH:mm:ss" type="datetime"
              placeholder="选择日期">
            </el-date-picker>
          </div>
        </el-form-item>

        <!--
        <el-form-item prop="maxCount">
          <div class="t">最大参与次数</div>
          <el-input v-model="stepTwoData.maxCount"></el-input>
          <div class="tip">单个用户在活动时间内最多能享受几次，0为不限制次数</div>
        </el-form-item>
        -->
        <el-form-item class="nolable">
          <el-button @click="backPreEvent">返回上一步</el-button>
          <el-button type="primary" @click="oneNextEvent">保存并下一步</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="step_form step_two step_three" v-show="stepActive === 3">
      <el-form :model="stepThreeData" ref="ruleForm3" class="form-com-css">
        <el-form-item prop="selectStationList">
          <div class="t">参与活动的油站</div>
          <div>
            <el-button type="primary" @click="getStationList">添加加油站</el-button>
          </div>
          <div>
            <el-table border :data="selectStationList" class="tableStyle">
              <el-table-column type="index" label="序号" width="180">
              </el-table-column>
              <el-table-column prop="stationName" label="油站名称">
              </el-table-column>
              <el-table-column prop="h" label="操作" width="180">
                <template slot-scope="scope">
                  <el-button @click="delRowEvent('selectStationList', scope.$index)" type="text"
                    size="small">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </el-form-item>
        <!--
          <el-form-item prop="activityFlag" label-width="30px"  :rules="{
            required: true,
            message: '请选择是否互斥',
            trigger: 'change',
          }">
          <div class="t">是否与立减活动互斥</div>
         
          <div>
            <el-radio v-model="stepThreeData.activityFlag" label="0"
              >否</el-radio
            >
            <el-radio v-model="stepThreeData.activityFlag" label="1"
              >是</el-radio
            >
          </div>
        </el-form-item>
        -->
        <el-form-item prop="memberCondition" :rules="{
            required: true,
            message: '请选择参与用户',
            trigger: 'change',
          }">
          <div class="t">参与的用户</div>
          <div>
            <el-radio v-model="stepThreeData.memberCondition" label="all">全选</el-radio>
            <el-radio v-model="stepThreeData.memberCondition" label="plus">plus会员</el-radio>
            <el-radio v-model="stepThreeData.memberCondition" label="part">指定</el-radio>
          </div>
          <div>
            <el-checkbox v-model="stepThreeData.memberLevelList" :disabled="stepThreeData.memberCondition !== 'part'"
              label="1">普卡</el-checkbox>
            <el-checkbox v-model="stepThreeData.memberLevelList" :disabled="stepThreeData.memberCondition !== 'part'"
              label="2">银卡</el-checkbox>
            <el-checkbox v-model="stepThreeData.memberLevelList" :disabled="stepThreeData.memberCondition !== 'part'"
              label="3">金卡</el-checkbox>
            <el-checkbox v-model="stepThreeData.memberLevelList" :disabled="stepThreeData.memberCondition !== 'part'"
              label="4">钻卡</el-checkbox>
            <el-checkbox v-model="stepThreeData.memberLevelList" :disabled="stepThreeData.memberCondition !== 'part'"
              label="5">黑卡</el-checkbox>
          </div>
          <div>
            <el-checkbox v-model="stepThreeData.paymentMethodList" :disabled="stepThreeData.memberCondition !== 'part'"
              label="wx">微信</el-checkbox>
            <el-checkbox v-model="stepThreeData.paymentMethodList" :disabled="stepThreeData.memberCondition !== 'part'"
              label="zfb">支付宝</el-checkbox>
            <el-checkbox v-model="stepThreeData.paymentMethodList" :disabled="true" label="dzk">会员卡</el-checkbox>
            <!-- :disabled="stepThreeData.memberCondition !== 'part'" -->
            <el-checkbox v-model="stepThreeData.paymentMethodList" :disabled="true" label="xj">
              <!-- :disabled="stepThreeData.memberCondition !== 'part'" -->
              现金
            </el-checkbox>
            <el-checkbox v-model="stepThreeData.paymentMethodList" :disabled="true" label="yl">
              <!-- :disabled="stepThreeData.memberCondition !== 'part'" -->
              刷卡
            </el-checkbox>
          </div>
          <div>
            <el-checkbox v-model="stepThreeData.memberTagsList" :disabled="stepThreeData.memberCondition !== 'part'"
              label="newUser">老用户</el-checkbox>
            <el-checkbox v-model="stepThreeData.memberTagsList" :disabled="stepThreeData.memberCondition !== 'part'"
              label="oldUser">新用户</el-checkbox>
          </div>
        </el-form-item>

        <el-form-item class="nolable">
          <el-button @click="backPreEvent">返回上一步</el-button>
          <el-button type="primary" @click="submitForm" v-if="!this.$route.query.id"
            :disabled="submited">保存并提交</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!--弹框-->
    <el-dialog :title="'添加油品'" :visible.sync="oilOpen" width="800px" append-to-body>
      <el-table :data="oilList" style="width: 100%" v-loading="loading" @selection-change="handleSelectionOilChange">
        <el-table-column type="selection"> </el-table-column>
        <el-table-column prop="oilName" label="品名" align="left">
        </el-table-column>
        <el-table-column prop="oilClass" label="类型" align="left">
        </el-table-column>
        <el-table-column prop="oilType" label="型号" align="left">
        </el-table-column>
        <el-table-column prop="unitCode" label="单位" align="left">
          <template slot-scope="scope">
            {{ scope.row.unitCode == "1" ? "升" : "" }}
            {{ scope.row.unitCode == "2" ? "千克" : "" }}
            {{ scope.row.unitCode == "3" ? "公斤" : "" }}
          </template>
        </el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer"></div>
    </el-dialog>
    <el-dialog :title="'添加油站'" :visible.sync="stationOpen" width="850px" append-to-body>
      <el-table :data="stationList" style="width: 100%" v-loading="loading"
        @selection-change="handleSelectionStationChange">
        <el-table-column type="selection"> </el-table-column>
        <af-table-column prop="stationName" label="油站名称" align="left">
        </af-table-column>
        <af-table-column prop="stationCode" label="油站编码" align="left">
        </af-table-column>
        <!--
        <af-table-column
          prop="isAlipayFlag"
          label="是否启用支付宝"
          align="left"
        >
          <template slot-scope="scope">
            {{ scope.row.isAlipayFlag == "0" ? "关闭" : "" }}
            {{ scope.row.isAlipayFlag == "1" ? "启动" : "" }}
          </template>
        </af-table-column>
        -->
        <af-table-column prop="status" label="油站状态" align="left">
          <template slot-scope="scope">
            {{ scope.row.status == "0" ? "停用" : "" }}
            {{ scope.row.status == "1" ? "启用" : "" }}
          </template>
        </af-table-column>
        <af-table-column prop="leader" label="联系人" align="left">
        </af-table-column>
        <af-table-column prop="phone" label="联系电话" align="left">
        </af-table-column>

        <af-table-column align="left" prop="regionDataList" label="省市区">
          <template slot-scope="scope">
            {{
              !scope.row.regionDataList
              ? ""
              : translateCodeToAddress(scope.row.regionDataList).toString()
            }}
          </template>
        </af-table-column>
        <af-table-column prop="detailRegionData" label="详情地址" align="left">
        </af-table-column>
        <af-table-column prop="stationLatitude" label="油站经度" align="left">
        </af-table-column>
        <af-table-column prop="stationLongitude" label="油站纬度" align="left">
        </af-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer"></div>
    </el-dialog>

    <el-dialog :title="'添加优惠券'" :visible.sync="couponOpen" width="850px" append-to-body>
      <el-table :data="couponList" style="width: 100%" v-loading="loading"
        @selection-change="handleSelectionCouponChange">
        <el-table-column type="selection"> </el-table-column>
        <el-table-column prop="couponRemark" label="优惠券标识" align="left">
        </el-table-column>
        <el-table-column prop="couponName" label="优惠券名称" align="left"></el-table-column>
      </el-table>
      <div slot="footer" class="dialog-footer"></div>
    </el-dialog>
  </div>
</template>

<script>
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import translateAddress from "@/utils/translateAddress.js";
import {
  addReductionActivity,
  getReductionActivity,
} from "@/api/market/reductionActivity";
import {
  getOilList,
  getStationList,
  addOil,
  upOil,
  delOil,
  getOilListByLogin,
} from "@/api/dept";
import {
  listInfo,
  changeCouponStatus,
  addIssue,
  listIssue,
  upIssueStatus,
  queryCouponInfo,
} from "@/api/coupon";

export default {
  name: "Market_Reduction",
  data() {
    return {
      // 切换table编辑
      updateSwitch: false,
      // 编辑的index
      updateIndex: null,
      activityUse: { CSP: "消费", RCH: "充值" },
      activityType: { RFA: "加油金额", LOR: "加油升数", AAL: "订单金额及升数" },
      activityMode: { FAD: "定额立减", PAR: "百分比立减", RDD: "随机立减" },
      oilList: [],
      stationList: [],
      selectStationList: [],
      selectOilList: [],
      rules: [{ full: "", cut: "", cutMin: "", cutMax: "" }],
      stepActive: 1,
      oilOpen: false,
      stationOpen: false,
      couponOpen: false,
      loading: false,
      couponLoading: false,
      stepOneData: {
        issueRemark: "",
        issueName: "",
        couponThresholdAmt: "",
        oilPartOrAll: 1,
        isimm: "",
        startDate: "",
        endDate: "",
        // getStartTime:'',
        // showIdList: [],
        // availableControl: "0",
        // appointedDaysList: [],
        // cycleDaysList: [],
        // issueType: "",
        // getThresholdAmt: "0",
        // couponIssueRelationList: [],
        // giveLimit: 9,
        // giveCount: 999999,
      },
      stepOneRule: {
        activityName: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
          {
            min: 3,
            max: 10,
            message: "长度在 3 到 10 个字符",
            trigger: "blur",
          },
        ],
        // activityUse: [
        //   { required: true, message: '请选择活动用途', trigger: 'blur' }
        // ],
        // activityType: [
        //   { required: true, message: '请选择活动类型', trigger: 'blur' }
        // ],
        // activityMode: [
        //   { required: true, message: '请选择活动方式', trigger: 'blur' }
        // ]
      },
      stepTwoData: {
        issueType: "",
        giveCount: "1",
        giveLimit: "999",
        getThresholdAmt: 0,
        antiCheating: "1",
        countOfDay: "1",
        thresholdType: "",
        thresholdLadder: [
          {
            value: "0",
            couponList: [],
          },
        ],
        antiMonthCheating: "1",
        countOfMonth: "1",
        // oilPartOrAll:true,
        // memberCondition:'all',
        // memberLevelList:'',
        // paymentMethodList:'',
        // memberTagsList:'',
        // isimm: '',
        // startDate: '',
        // endDate: '',
        // maxCount:''
      },
      stepTwoRules: {
        startDate: [
          { required: true, message: "选择开始时间", trigger: "change" },
        ],
        endDate: [
          { required: true, message: "请选择结束时间", trigger: "change" },
        ],
        maxCount: [
          { required: true, message: "请填写最大参与次数", trigger: "change" },
        ],
      },
      stepThreeData: {
        memberCondition: "all",
        memberLevelList: [],
        paymentMethodList: [],
        memberTagsList: [],
        activityFlag: "0"
      },
      currentOilList: [],
      couponList: [],
      selectionCouponList: [],
      submited: false,
    };
  },
  computed: {},
  created() {
    this.initData();
  },
  methods: {
    changeMember(index) {
      this.selectionCouponList[index].minUseCouponAmt = this.selectionCouponList[index].minUseCouponAmt.replace(/[^\d]/g, '')
      console.log(this.selectionCouponList[index].minUseCouponAmt);
 },
    switchEdit(index) {
      this.updateIndex = index
      this.updateSwitch = !this.updateSwitch
    },
    submitTable(index, value) {
      this.updateSwitch = false
    },
    initData() {
      this.getOilListByLogin();
      var id = this.$route.query.id;
      console.log(id);
      if (id != null && id != "") {
        queryCouponInfo(id).then((response) => {
          console.log(response.data);
          this.selectionCouponList =
            response.data.couponList == null ? [] : response.data.couponList;
          this.selectOilList =
            response.data.oilIdLists == null ? [] : response.data.oilIdLists;
          this.selectStationList =
            response.data.stationLists == null
              ? []
              : response.data.stationLists;

          if (response.data.thresholdType != "ladder") {
            response.data.thresholdLadder = [
              {
                value: "0",
                couponList: [],
              },
            ];
          }
          this.stepOneData = response.data;
          this.stepTwoData = response.data;
          this.stepThreeData = response.data;

          // this.selectOilList = response.data.selectOilList;
          // this.selectStationList = response.data.selectStationList;
          // this.stepOneData.activityId =
          //   response.data.reductionActivity.activityId;
          // this.stepOneData.activityName =
          //   response.data.reductionActivity.activityName;
          // this.stepOneData.activityMode =
          //   response.data.reductionActivity.activityMode;
          // this.stepOneData.activityType =
          //   response.data.reductionActivity.activityType;
          // this.stepOneData.activityUse =
          //   response.data.reductionActivity.activityUse;
          // this.stepOneData.activityUse =
          //   response.data.reductionActivity.activityUse;

          // this.stepTwoData.oilPartOrAll =
          //   response.data.reductionActivity.oilPartOrAll;
          // this.stepTwoData.memberCondition =
          //   response.data.reductionActivity.memberCondition;
          // this.stepTwoData.memberLevelList =
          //   response.data.reductionActivity.memberLevelList;
          // this.stepTwoData.paymentMethodList =
          //   response.data.reductionActivity.paymentMethodList;
          // this.stepTwoData.memberTagsList =
          //   response.data.reductionActivity.memberTagsList;
          // this.stepTwoData.startDate =
          //   response.data.reductionActivity.startDate;
          // this.stepThreeData.budget = response.data.reductionActivity.budget;
          // console.log(response.data.reductionActivity.startDate);
          // this.stepTwoData.endDate = response.data.reductionActivity.endDate;
          // this.stepTwoData.maxCount = response.data.reductionActivity.maxCount;
          // this.stepThreeData.activityRule =
          //   response.data.reductionActivity.activityRule;
          // this.stepThreeData.antiCheating =
          //   response.data.reductionActivity.antiCheating;
          // this.stepThreeData.countOfDay =
          //   response.data.reductionActivity.countOfDay;
          // console.log(response.data.selectOilList);
          // console.log(response.data.reductionRulesList.length);
          // if (response.data.reductionRulesList.length == 0) {
          //   this.rules = [
          //     { budget: "", full: "", cut: "", cutMin: "", cutMax: "" },
          //   ];
          // } else {
          //   this.rules = response.data.reductionRulesList;
          // }
          // console.log(response.data.reductionActivity.antiCheating);

          // this.stepThreeData.activityRule =
          //   response.data.reductionActivity.activityRule;

          // this.form = response.data;
          // this.open = true;
          // this.title = "修改立减活动";
        });
      }
    },
    addThresholdLadder() {
      this.stepTwoData.thresholdLadder.push({
        value: "100",
        couponList: [],
      });
    },
    deleteThresholdLadder(rowIndex) {
      if (this.stepTwoData.thresholdLadder.length <= 1) {
        return;
      }
      this.stepTwoData.thresholdLadder.splice(rowIndex, 1);
      this.stepTwoData = { ...this.stepTwoData };
    },
    submitForm() {
      //拼接参数
      let formData = {};
      // formData = JSON.parse(JSON.stringify(this.stepOneData));
      formData.couponList = this.selectionCouponList;
      formData.oilIdLists = this.selectOilList;
      formData.stationLists = this.selectStationList;

      formData = JSON.parse(
        JSON.stringify({
          ...this.stepOneData,
          ...this.stepTwoData,
          ...this.stepThreeData,
          ...formData,
        })
      );

      // formData["oilPartOrAll"] = this.stepTwoData.oilPartOrAll;
      // formData["selectStationList"] = this.selectStationList;
      // formData["selectOilList"] = this.selectOilList;
      // formData["oilPartOrAll"] = this.stepTwoData.oilPartOrAll;
      // formData["memberCondition"] = this.stepTwoData.memberCondition;
      // formData["memberLevelList"] = this.stepTwoData.memberLevelList;
      // formData["paymentMethodList"] = this.stepTwoData.paymentMethodList;
      // formData["memberTagsList"] = this.stepTwoData.memberTagsList;
      // formData["startDate"] = this.stepTwoData.startDate;
      // formData["endDate"] = this.stepTwoData.endDate;
      // formData["maxCount"] = this.stepTwoData.maxCount;
      // formData["activityRule"] = this.stepThreeData.activityRule;
      // formData["antiCheating"] = this.stepThreeData.antiCheating;
      // formData["countOfDay"] = this.stepThreeData.countOfDay;
      // formData["budget"] = this.stepThreeData.budget;
      // formData["rules"] = this.rules;

      // console.log(formData);
      this.submited = true;
      addIssue(formData).then((response) => {
        console.log(response);
        this.msgSuccess("添加成功")

        // console.log(response);
        // this.stepOneData.activityId = response.data;
        // this.msgSuccess("保存成功");
        // this.$router.push({
        //   path: '/market/reduction_edit',
        //   query: {activityId:response.data}
        // });
        // this.form = response.data;
        // this.open = true;
        // this.title = "修改立减活动";
      }).catch(() => {
        this.submited = false;
      });
    },
    emptyFun(data, key) {
      let res = data.every(item => {
        return item[key] !== null
      })
      return res
    },
    oneNextEvent() {
      if (!this.emptyFun(this.selectionCouponList, 'minUseCouponAmt')) {
        this.$message.error('优惠券使用门槛不能为空！！！');
        return false;
      }
      if (this.selectOilList.length > 0) {
        this.$refs["ruleForm" + this.stepActive].validate((valid) => {
          if (valid) {
            this.stepActive++;
          } else {
            console.log("error submit!!");
            return false;
          }
        });
      } else {
        this.$message.error('请选择油品！！！');
      }
    },
    delRowEvent(name, index) {
      console.log(index);
      this[name].splice(index, 1);
    },
    backPreEvent() {
      this.stepActive--;
    },
    getStartTime() {
      this.stepTwoData.startDate = this.formatter(
        new Date(),
        "yyyy-MM-dd hh:mm:ss"
      );
    },
    addListEvent(n, i) {
      this[n][i].rules.push({ full: "", cut: "", cutMin: "", cutMax: "" });

      console.log(this.selectOilList);
    },
    addRulesListEvent(n, i) {
      this.rules.push({ full: "", cut: "", cutMin: "", cutMax: "" });

      console.log(this.selectOilList);
    },
    reduceListEvent(n, i) {
      console.log(i);
      console.log(n);
      n.splice(i, 1);
    },
    getOilListByLogin() {
      this.loading = true;
      getOilListByLogin()
        .then((res) => {
          this.oilList = res.rows;
          console.log("this.oilList", this.oilList);
        })
        .finally(() => (this.loading = false));
    },
    getStationList() {
      this.stationOpen = true;
      this.loading = true;
      this.stationQuery = {
        enterpriseId: this.presentEnterprise.enterpriseId,
      };
      getStationList(this.stationQuery)
        .then((res) => {
          this.stationList = res.rows;
        })
        .finally(() => (this.loading = false));
    },
    getCouponList() {
      this.couponOpen = true;
      this.couponLoading = true;
      // this.couponQuery = {
      //   enterpriseId:this.presentEnterprise.enterpriseId
      // }

      listInfo({})
        .then((res) => {
          if (res.rows == null) {
            this.couponList = [];
          } else {
            this.couponList = res.rows;
          }
        })
        .finally(() => (this.couponLoading = false));
    },
    translateCodeToAddress(codeArr) {
      return translateAddress(codeArr);
    },
    handleSelectionOilChange(val) {
      this.selectOilList = val;
    },
    handleSelectionStationChange(val) {
      this.selectStationList = val;
    },
    handleSelectionCouponChange(val) {
      this.selectionCouponList = val;
    },
    formatter(thistime, fmt) {
      let $this = new Date(thistime);
      let o = {
        "M+": $this.getMonth() + 1,
        "d+": $this.getDate(),
        "h+": $this.getHours(),
        "m+": $this.getMinutes(),
        "s+": $this.getSeconds(),
        "q+": Math.floor(($this.getMonth() + 3) / 3),
        S: $this.getMilliseconds(),
      };
      if (/(y+)/.test(fmt)) {
        fmt = fmt.replace(
          RegExp.$1,
          ($this.getFullYear() + "").substr(4 - RegExp.$1.length)
        );
      }
      for (var k in o) {
        if (new RegExp("(" + k + ")").test(fmt)) {
          fmt = fmt.replace(
            RegExp.$1,
            RegExp.$1.length === 1
              ? o[k]
              : ("00" + o[k]).substr(("" + o[k]).length)
          );
        }
      }
      return fmt;
    },
  },
};
</script>
<style lang="scss" scoped>
.redu_root {
  .alert-style {
    width: 50%;
    height: 40px;
    margin-left: 20px;
  }

  .disflx {
    display: flex;
  }

  .mt12 {
    margin-top: 12px;
  }

  .redu_title {
    height: 60px;
    font-size: 18px;
    line-height: 60px;
    font-weight: bold;
    background: #ccc;
    color: #000;
    text-indent: 30px;
  }

  .redu_step {
    width: 85%;
    margin: 24px auto;
  }

  .step_form {
    width: 85%;
    margin: 12px auto;

    .form-com-css {
      .el-form-item {
        padding: 20px;
        padding-left: 0;
        border: 1px solid #ccc;

        &.nolable {
          ::v-deep .el-form-item__content {
            margin-left: 20px !important;
          }
        }

        .t {
          &::before {
            content: "*";
            color: red;
            margin-right: 5px;
          }
        }

        .one-alert {
          align-items: center;
        }
      }
    }

    &.step_two {
      .form-com-css {
        .el-form-item {
          padding: 0 24px;

          &.nolable {
            padding: 20px 0;
          }

          .t {
            &::before {
              content: "*";
              color: red;
              margin-right: 5px;
            }
          }

          .tableStyle {
            margin: 20px 0;

            ::v-deep table {

              thead tr th,
              tbody tr td {
                padding: 0;
                text-align: center;
                background: transparent;
              }

              tbody tr td {
                padding: 5px 0;
              }
            }
          }

          .date-css {
            margin-bottom: 15px;

            .el-input {
              width: 50%;
            }
          }
        }
      }
    }

    &.step_three {
      .form-com-css {
        .three-one {
          padding: 20px 0;

          .t-top-tip {
            margin-left: 30px;
            margin-top: 12px;

            p {
              margin-bottom: 0;

              i {
                font-style: normal;
                margin-left: 24px;
                color: #1890ff;
              }
            }
          }
        }

        .three-list {
          .row-bg {
            margin: 12px 0;
          }

          margin: 20px 0;
        }

        .oilNameDiv {
          justify-content: space-between;
        }

        .three-b {
          margin: 12px 0;
          align-items: center;

          .el-alert {
            margin-left: 0;
          }

          .el-input {
            width: 60%;
          }
        }
      }
    }
  }
}
</style>
